<template>
  <v-chart class="flex-1" :option="option" v-if="JSON.stringify(option) != '{}'" />
</template>

<script setup lang="ts">
import { ref, watch,reactive, onMounted } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: Number,
    default: 0
  },
  maxValue: {
    type: Number,
    default: 100
  }
})
const option = ref({});

const setOption=()=>{
  option.value = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: props.title,
        type: 'gauge',
        max: props.maxValue,
        detail: {
          formatter: '{value}'
        },
        axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    // color: '#263957',
                    // [
                    //   // 'rgb(0,228,0)', 'rgb(255,255,0)', 'rgb(255,126,0)', 'rgb(255,0,0)', 'rgb(153,0,76)', 'rgb(126,0,35)'
                    //   // [0.1, 'rgb(0,228,0)'],
                    //   // [0.3, 'rgb(255,255,0)'],
                    //   // [0.5, 'rgb(255,126,0)'],
                    //   // [0.7, 'rgb(255,0,0)'],
                    //   // [0.9, 'rgb(153,0,76)'],
                    //   // [1, 'rgb(126,0,35)']
                    // ],
                    width: 10
                }
            },
        data: [
          {
            value: props.value,
            name: '覆盖率(%)',
            color: '#263957'
          }
        ]
      }
    ]
  };
}

watch(() => props.value, (newValue) => {
  setOption()
})


</script>
